<!DOCTYPE HTML>
<html>
	<head>
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="organic_style.css"/>
    
		<style type="text/css">
			#map, #template {
				overflow:scroll;
				width : 512px;
				height : 512px;
				white-space:nowrap;
			}
			#map { float : left;}
			#mapLabel {float : left;}
			#template { float : right;}
			#templateLabel { float : right;}
			#xmlResult {
				width : 512px;
				height : 512px;
				border : 1px black groove;
			}
		</style>
	</head>
	
	<body>
		<ul class="tabs">
            <li><a href="#mapEditor">Map Editor</a></li>
            <li><a href="#monsterEditor">Monster Editor</a></li>
        </ul>

        <div class="tab_container">
            <div id="mapEditor" class="tab_content">
                <table style='clear:both'>
                    <tr><td><label for="tilesetSource">Tileset</label></td><td><input type="file" id="tilesetSource" onchange="tilesetChange()"/></td></tr>
                    <tr><td><label for="tileSize">Tile Size</label></td><td><input type="number" id="tileSize" value="64" onchange="tilesetChange()"/></td></tr>
                    <tr><td><label for="mapWidth">Map Width</label></td><td><input type="number" id="mapWidth" value="10" onchange="mapWidthChange(this)"/></td></tr>
                    <tr><td><label for="mapHeight">Map Height</label></td><td><input type="number" id="mapHeight" value="10" onchange="mapHeightChange(this)"/></td></tr>
                </table>

                <div style='clear:both'>
                    <h3 id="mapLabel">Map</h3>
                    <h3 id="templateLabel">Tileset</h3>
                </div>

                <div style='clear:both'>
                    <div id="map"></div>
                    <div id="template"></div>
                </div>
            </div>

            <div id="monsterEditor" class="tab_content">
                <div style='clear:both'>
                    <h3 id="mapLabel">Map</h3>
                </div>

                <div style='clear:both'>
                    <div id="mapMonster"></div>
                </div>
            </div>
        </div>
		
		<div style='clear:both'>
		<h3>Result</h3>
		<div contenteditable=true id="xmlResult">
			
		</div>
		</div>
		
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                //Default Action
                $(".tab_content").hide(); //Hide all content
                $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                $(".tab_content:first").show(); //Show first tab content

                //On Click Event
                $("ul.tabs li").click(function() {
                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $(this).addClass("active"); //Add "active" class to selected tab
                    $(".tab_content").hide(); //Hide all tab content
                    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                    $(activeTab).fadeIn(); //Fade in the active content
                    return false;
                });

            });
        </script>
		
		<script type="text/javascript">
			var mapWidth = 10;
			var mapHeight = 10;
			var templateWidth = 0;
			var templateHeight = 0;
			var tileset = new Image();
			
			var mapEditor;
			var monsterEditor;
			
			var mapMap;
			var mapMonster;
		
			function mapWidthChange(target) {
				mapWidth = target.value;
				mapChange(mapWidth, mapHeight);
			}
			
			function mapHeightChange(target) {
				mapHeight = target.value;
				mapChange(mapWidth, mapHeight);
			}
			
			function mapChange(width,height) {
				var map = document.getElementById('map');
				map.innerHTML = "";
				var tileSize = document.getElementById('tileSize').value;
				
				for (var y = 0; y < height; ++y) {
					var div = document.createElement('div');
					div.setAttribute('style', 'padding : 0px; margin : 0px;height : ' + tileSize + 'px;');
					
					for (var x = 0; x < width; ++x) {
						var canv = document.createElement('canvas');
						canv.setAttribute('width', tileSize);
						canv.setAttribute('height', tileSize);
						canv.setAttribute('style', 'border:1px black groove');
						canv.setAttribute('id', 'Map' + (y * width + x));
						
						canv.ondragenter 	= mapEnter;
						canv.ondragover 	= mapOver;
						canv.ondrop 		= mapDrop;

						div.appendChild(canv);
					}
					map.appendChild(div);
				}
			}
			
			function mapEnter(e) {
			
				return true;
			}
			
			function mapOver(e) {
				return false;
			}
			
			function mapDrop(e) {
				var canv = e.target;
				var id = e.dataTransfer.getData("Data");
				var tileSize = document.getElementById('tileSize').value;
				var x = id % templateWidth;
				var y = Math.floor(id / templateWidth);
				
				canv.getContext('2d').drawImage(tileset, x * tileSize, y * tileSize, tileSize, tileSize, 0, 0, tileSize, tileSize);
				canv.setAttribute('value', id);
				
				analyzeMap();
				
				return false;
			}
			
			function analyzeMap() {
				var str = '';
				for (var y = 0; y < mapHeight; ++y) {
					for (var x = 0; x < mapWidth; ++x) {
						var canv = document.getElementById('Map' + (y * mapWidth + x));
						
						var append = 0;
						if (canv.getAttribute('value') != null) {
							append = canv.getAttribute('value');
						}
						
						str = str + append + ';';
					}
					str = str + "<br />"
				}
				
				
				document.getElementById('xmlResult').innerHTML = str;
			}
			
			function tileDragStart(e) {
				e.dataTransfer.effectAllowed = 'move';
				e.dataTransfer.setData("Data", e.target.getAttribute('id'));
				e.dataTransfer.setDragImage(e.target, 0, 0);
				
				return true;
			}
			
			function tileDragEnd(e) {
				e.dataTransfer.clearData('Data');
				return true;
			}
			
			function tilesetChange() {
				tileset.src = document.getElementById('tilesetSource').value.split(/[/\\]/).pop();
				
				tileset.onload = function () {
					var tileSize = document.getElementById('tileSize').value;
					var width = tileset.width / tileSize;
					var height = tileset.height / tileSize;
					
					templateWidth = width;
					templateHeight = height;
					
					var template = document.getElementById('template');
					template.innerHTML = "";
					
					for (var y = 0; y < height; ++y) {
						var div = document.createElement('div');
						div.setAttribute('style', 'padding : 0px; margin : 0px; height :' + tileSize + 'px;');
						
						for (var x = 0; x < width; ++x) {
							var canv = document.createElement('canvas');
							canv.setAttribute('draggable', 'true');
							canv.setAttribute('id', y * width + x);
							canv.setAttribute('width', tileSize);
							canv.setAttribute('height', tileSize);
							
							canv.ondragstart 	= tileDragStart;
							canv.ondragend 		= tileDragEnd;

							canv.getContext('2d').drawImage(tileset, x * tileSize, y * tileSize, tileSize, tileSize, 0, 0, tileSize, tileSize);
							
							div.appendChild(canv);
						}
						template.appendChild(div);
					}
				};
			}
			
			/*function showMapEditor() {
				mapEditor.setAttribute('style','visibility:visible');
				
				monsterEditor.setAttribute('style','visibility:collapse');
			}
			
			function showMonsterEditor() {
				monsterEditor.setAttribute('style','visibility:visible');
				
				
				mapEditor.setAttribute('style','visibility:collapse');
			}*/
			
			window.onload = function (){
				/*canvasTemplate 	= document.getElementById('canvasTemplate').getContext('2d');
				canvasMap		= document.getElementById('canvasMap').getContext('2d');
				
				canvasMap.fillStyle = "rgba(200,0,200,1)";
				canvasMap.fillRect(30, 30, 50,50);
				*/
				
				mapEditor 		= document.getElementById('mapEditor');
				monsterEditor 	= document.getElementById('monsterEditor');
				
				mapMap			= document.getElementById('map');
				mapMonster		= document.getElementById('mapMonster');
				
				showMapEditor();
				
				mapChange(mapWidth, mapHeight);
				tilesetChange();
			};
		</script>
	</body>
</html>